<style>
    .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
        border: none !important;
    }
</style>
<div class="panel-body region-goods">
    <div class="region-goods-details row">
        <div class="region-goods-left col-sm-2">
            参数
        </div>
        <div class="region-goods-right col-sm-10">
            <table class="table ">
                <thead>
                <tr>
                    <td style='width:150px;'>参数名称</td>
                    <td>参数值
                        <small>拖动行可进行排序</small>
                    </td>
                    <th style='width:50px;'></th>
                    <th style='width:100px;'></th>
                </tr>
                </thead>
                <tbody id="param-items">
                {foreach $params as $key => $p}
                <tr>
                    <td>
                        <input name="param_title[]" type="text" class="form-control param_title" value="{$p['title']}"/>
                        <input name="param_id[]" type="hidden" class="form-control" value="{$p['id']}"/>
                    </td>
                    <td>
                        <input name="param_value[]" type="text" class="form-control param_value" value="{$p['value']}"/>
                    </td>
                    <td>
                        <a href="javascript:;" class='btn btn-default btn-sm' onclick="deleteParam(this)" title="删除"><i class='fa fa-remove'></i></a>
                    </td>
                    <td>
                        <a href="javascript:;" class='btn btn-default btn-sm' title="拖动排序"><i class='icow icow-tuodong' style="margin-right: 5px;font-size:12px;"></i>拖动排序</a>
                    </td>
                </tr>
                {/foreach}
                </tbody>
                <tbody>
                <tr>

                    <td colspan="4">
                        <a href="javascript:;" id='add-param' onclick="addParam()" class="btn btn-default" title="添加参数"><i class='icon icon-plus'></i> 添加参数</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

    </div>
</div>

<script language="javascript">
    $(function () {
        require(['jquery.ui'], function () {
            $("#param-items").sortable();
        });
        $("#chkoption").click(function () {
            var obj = $(this);
            if (obj.get(0).checked) {
                $("#tboption").show();
                $(".trp").hide();
            } else {
                $("#tboption").hide();
                $(".trp").show();
            }
        });
    })

    function addParam() {
        let url = "{:webUrl('web.goods.index/tpl',array('tpl'=>'param'))}";
        $.ajax({
            "url": url,
            success: function (data) {
                $('#param-items').append(data);
            }
        });
        return;
    }

    function deleteParam(o) {
        $(o).parent().parent().remove();
    }
</script>
